<template>
  <div  class="container" :class="[{'isDay':isDay},{'showLeft':showLeft}]">
    <div class="content">
      <div class="top">

        <el-tooltip class="item" :disabled = 'idx === 0' v-for="(item, idx) in isDay?tabDayList:tabList" :key="idx" effect="light" content="敬请期待" placement="right">
          <div @click="navItemSelet(idx)" class="top_item" :class="[{active:seletIndex===idx}]" >
            <img :src="item.img" alt="">
            <span class="top_item_text">{{item.title}}</span>
          </div>
        </el-tooltip>



      </div>
      <div class="bottom_content">
        <div class="day_night_change_c">
          <div class="day_night_change">
            <!--  黑天-->
            <img @click="dayNightChange(1)" class="" :src="!isDay?nigiht_night:day_night" alt=""/>
            <!--  白天-->
            <img @click="dayNightChange(2)" class="" :src="!isDay?nigiht_day:day_day" alt=""/>

          </div>
        </div>

        <div class="bottom">
          <a :href="item.path" v-for="(item, idx) in isDay?bottomDayList:bottomList" :key="idx">
            <img   :src="item.img" alt="">

          </a>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
  import { mapState } from "vuex";
  export default {

    name: "",
    data () {
      return {
        nigiht_night: require('../../assets/PC_black/模式切换@2x(1).png'),// 黑夜黑
        nigiht_day: require('../../assets/PC_black/白天@2x(1).png'),// 黑夜白
        day_night: require('../../assets/PC_day/模式切换@2x(2).png'),// 白天黑
        day_day: require('../../assets/PC_day/白天@2x(2).png'),// 白天白

        //选择的
        seletIndex:0,
        // 导航数据
        tabList: [
            {
              title: 'DASHBOARD',
              img: require('../../assets/PC_black/仪表@2x.png'),
              path:''
            },
            {
              title: 'YOUR POSITIONS',
              img: require('../../assets/PC_black/我的@2x.png'),
              path:''
            },
            {
              title: 'THEFORSE POOL',
              img: require('../../assets/PC_black/矿@2x.png'),
              path:''
            },
            {
              title: 'ASSET PRICES',
              img: require('../../assets/PC_black/钱@2x.png'),
              path:''
            }
          ],
        tabDayList: [
          {
            title: 'DASHBOARD',
            img: require('../../assets/PC_day/模块@2x.png'),
            path:''
          },
          {
            title: 'YOUR POSITIONS',
            img: require('../../assets/PC_day/我的@2x.png'),
            path:''
          },
          {
            title: 'THEFORSE POOL',
            img: require('../../assets/PC_day/矿@2x.png'),
            path:''
          },
          {
            title: 'ASSET PRICES',
            img: require('../../assets/PC_day/钱@2x.png'),
            path:''
          }
        ],
        fullHeight: document.documentElement.clientHeight,

        // 底部数据
        bottomList: [
          {
            title: 'DASHBOARD',
            img: require('../../assets/PC_black/飞机@2x.png'),
            path:'https://twitter.com/TheforceTrade'
          },
          {
            title: 'YOUR POSITIONS',
            img: require('../../assets/PC_black/推特@2x.png'),
            path:'http://t.me/theforcetrade1'
          },
          // {
          //   title: 'THEFORSE POOL',
          //   img:  require('../../assets/PC_black/discord@2x.png'),
          //   path:''
          // },
          // {
          //   title: 'ASSET PRICES',
          //   img: require('../../assets/PC_black/blogger@2x.png'),
          //   path:''
          // }
          // ,
          {
            title: 'ASSET PRICES',
            img: require('../../assets/PC_black/doc@2x.png'),
            path:'https://theforce-trade.gitbook.io/whitepaper/'
          }
        ],
        bottomDayList: [
          {
            title: 'DASHBOARD',
            img: require('../../assets/PC_day/飞机@2x.png'),
            path:'https://twitter.com/TheforceTrade'
          },
          {
            title: 'YOUR POSITIONS',
            img: require('../../assets/PC_day/推特@2x.png'),
            path:'http://t.me/theforcetrade1'
          },
          // {
          //   title: 'THEFORSE POOL',
          //   img:  require('../../assets/PC_day/discord@2x.png'),
          //   path:''
          // },
          // {
          //   title: 'ASSET PRICES',
          //   img: require('../../assets/PC_day/blogger@2x.png'),
          //   path:''
          // }
          // ,
          {
            title: 'ASSET PRICES',
            img: require('../../assets/PC_day/doc@2x.png'),
            path:'https://theforce-trade.gitbook.io/whitepaper/'
          }
        ]
      }
    },
    methods: {
      // 白天黑夜切换
      dayNightChange (type) {
        console.log(type);
        // type 1晚上 2白天切换
        this.$store.commit('DAY_NIGHT_CHANGE',type);
      },

      // 点击了菜单栏
      navItemSelet (idx) {
        if (idx > 0) {
          this.$message.info('敬请期待')
        }
      },

      // 点击了底部
      goLink (path) {
        window.location.href = path
      }
    },
    computed: {

      ...mapState([
          'showLeft'
        ]),
      isDay: {
        get() {
          return this.$store.state.isDay;
        },
        set(val) {
          this.$store.state.isDay = val;
        },
      },
    },
    mounted() {

      const that = this

      window.onresize = () => {

        return (() => {

          window.fullHeight = document.documentElement.clientHeight

          that.fullHeight = window.fullHeight

        })()

      }

    },


    // 监听window.onresize事件

    watch: {

      fullHeight (val) {

        if(!this.timer) {

          this.fullHeight = val

          this.timer = true
          console.log(val);

          let that = this

          setTimeout(function (){

            that.timer = false

          },400)

        }

      }

    }

  }
</script>

<style lang="less" scoped>

  .container {


    z-index: 999;
    position: fixed;
    top: 67px;
    left: 0;
    bottom: 0;
    .nNavbg;
    width: 225px;
    height: calc(100% - 67px);



    .content {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .top {
      display: flex;
      flex-direction: column;

      .top_item {
        box-sizing: border-box;
        height: 37px;
        display: flex;
        align-items: center;

        img {
          height: 20px;
          width: 20px;
          margin-left: 15px;
        }

        span {
          margin-left: 17px;
          font-size: 16px;
          font-weight: 400;
          color: #FFFFFF;
        }


      }
    }

    .bottom_content {

      width: 100%;

      .day_night_change_c {
        display: none;
      }
      .day_night_change {

        display: flex;
        justify-content: center;
        margin-bottom: 25px;
        >img {
          height: 20px;
          width: 20px;
          margin-right: 20px;
        }
      }
    }

    .bottom {
      display: flex;
      justify-content: space-around;
      margin-bottom: 40px;
      list-style-type:none;
      margin:0px;
      img {
        width: 20px;
        height: 20px;
      }
    }
  }

  .active {
    .nBg;
    border-right: 3px solid #2787FF;
  }

  .isDay {
    .dNavbg;
    .active {
      background-color: #F2F8FF;
    }
    .top_item_text {
      color: #2787FF!important;
    }
  }

  @media screen and (max-width: 800px){
    .container{
      display: none;
    }

    .showLeft {

      .day_night_change_c {
        display: block!important;
      }
      display: block!important;
      width: 188px!important;
      .bottom {
        margin-bottom: 17px!important;
      }
    }
  }
</style>
